<template>
  <div class="interview-skills">
     <SearchBox :formInlineMsg='formInline' @formInline='formInlinefn' @SearchMsg='handleSearch' :articledialogVisibleMsg='articledialogVisible' @articledialogVisible_a='handleClose' :search_title='search_title'>
       <template #left>
             <el-input v-model.trim="formInline.tagName" placeholder=""></el-input>
       </template>
       <template #right>
             <el-select v-model="formInline.state" placeholder="请选择">
               <el-option label="启用" value="1"></el-option>
               <el-option label="禁用" value="0"></el-option>
             </el-select>
       </template>
     </SearchBox>
     <DataBar :DataNum='DataNum'></DataBar>
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="index" label="序号" width="100">
          <template #default='{$index}'>
            {{($index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="200"></el-table-column>
        <el-table-column prop="tagName" label="标签名称" width=""></el-table-column>
        <el-table-column prop="username" label="创建者" width=""></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="">
            <template #default="{row}">
              {{row.addDate.replace(/T/g,' ').replace(/.000Z/g,'')}}
            </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="">
            <template #default="{row}">
              {{row.state===1?'已启用':'已禁用'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="">
          <template #default="{row}">
           <el-button type="text" @click="enable(row.id,row.state)">{{row.state===1?'启用':'禁用'}}</el-button>
           <el-button type="text" @click="recompose(row)" :disabled='row.state===1?true:false'>修改</el-button>
           <el-button type="text" @click="del(row)" :disabled='row.state===1?true:false'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 文章对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="400px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属学科" prop="subjectID" v-show='!this.routerhand.id&&!this.routerhand.name'>
          <el-select v-model="subjectValue" placeholder="请选择" style="width:100%" @change="subjectValuefn">
            <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName" style="width:100%">
          <el-input type="text" v-model="formData.tagName" autocomplete="off" placeholder="请输入目录名称"></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox'
import DataBar from '@/components/DataBar'
import { list, listSearch, changeState, remove, add, update, simple } from '@/api/hmmm/tags'
import { simple as subjects_simple } from '@/api/hmmm/subjects'

export default {
  async created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
    this.routerhand=this.$route.query
    if(this.routerhand.id&&this.routerhand.name)this.search_title.routetitle='← 返回学科'
    this.subjectValue=this.routerhand.name

    const {data}=await subjects_simple()
    console.log(data);
    const findValue=data.find(item=>this.subjectValue===item.label)
    console.log(findValue);
    this.formData.subjectID=findValue.value
  },
  components:{
    SearchBox,
    DataBar,
  },
  data () {
    return {
      search_title:{
       title1:'关键字',
       title2:'状态',
       buttonData:'新增标签',
       routetitle:'',
      },
      formInline: {
        tagName: '',
        state: ''
      },
      DataNum:0,//数据一共多少条
      tableData: [],
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      title:'',//文章弹出对话框标题
      formData:{
        id:null,
        subjectID:0,
        tagName:'',
      },//文章弹出对话框绑定的数据
      subjectOptions: [],
      subjectValue:'',
      rules:{
        subjectID:[
      { required:true,message:'请选择所属学科',trigger:'blur'},
      ],
        tagName:[
      { required:true,message:'请输入标签名称',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '标签名称首尾不能为空格', trigger: 'blur' }
      ]
      },
    }
  },
  methods: {
    //渲染函数
    async getlist(params){
      this.tableData=[]
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts
      this.totalPages=data.pages*this.pagesizeChange
      this.tableData=data.items
      console.log(this.tableData);
    },
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
    },
    //文章搜索
    async handleSearch(){
      console.log(this.formInline);
      this.getlist(
        {
          state:this.formInline.state,
          page:this.pageChange,
          pagesize:this.pagesizeChange,
          tagName:this.formInline.tagName,
          subjectID:this.$route.query.id,
        })
    },
    //清空
    formInlinefn(){
      this.formInline={}
    },
    //是否启用
    async enable(id,state){
      const state_a=state===0?1:0
      try {
      await changeState( {"id":id,"state":state_a})
      this.$message.success('修改成功')
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
      } catch (error) {
        this.$message.error('修改失败')
        console.log(error);
      }
    },
    //删除
    del(row){
      const newrow={}
      for(let key in row){
        newrow[key]=row[key]
      }
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
          await remove(newrow)
          this.$message.success('删除成功!');
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
          } catch (error) {
          this.$message.error('删除失败!');
            console.log(error);
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#点击_新增技巧_的确认按钮后...
    async handleClose(Boolean) {
      this.title='新增目录'
      const {data}=await subjects_simple()
      console.log(data);
      data.forEach(item => this.subjectOptions.push({value: item.value,label: item.label}));
      this.articledialogVisible=Boolean
    },
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.subjectValue=''
      this.subjectOptions=[]
      this.formData={
        id:null,
        subjectID:0,
        tagName:'',
      }
    },
    subjectValuefn(){
      const findValue=this.subjectOptions.find(item=>this.subjectValue===item.label)
      this.formData.subjectID=findValue.value
    },
    //确定按钮
    async confirm(){
      try {await this.$refs.formData.validate()} catch (error) {return}
      if(this.title==='新增目录'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
        } catch (error) {
          console.log(error);
        }
      }
      else{
        try {
          const res=await update(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,subjectID:this.$route.query.id})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //修改
    async recompose(row){
      console.log(row);
      this.title='修改目录'
      const {data}=await subjects_simple()
      console.log(data);
      this.subjectOptions=data

      const findValue=this.subjectOptions.find(item=>row.subjectID===item.value)
      console.log(findValue);
      this.formData={
        id:row.id,
        subjectID:row.subjectID,
        tagName:row.tagName,
      }
      this.subjectValue=findValue.label
      this.articledialogVisible = true
    },
},

}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  ::v-deep th {
   background-color: #fafafa !important;
   border-bottom: 2px solid #e8e8e8 !important;
  }
  ::v-deep .el-dialog{
    border-radius: 6px;
  }
  ::v-deep .el-dialog__header{
    border-radius: 6px 6px 0 0;
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    float: right;
    margin-right: 0px;
   }
  }
  ::v-deep .video-Visible{
    .el-dialog__header{
      background: #fff;
    }
    .el-dialog{
      border-radius: 3px;
    }
    .el-dialog__close{
      color: #909399;
    }
  }
}
</style>
